<template>
  <el-dialog
    width="900px"
    :close-on-click-modal="false"
    :title="title"
    @close="close"
    :visible.sync="visible"
    append-to-body
    class="dd"
  >
    <el-form class="information" ref="form">
      <el-row>
        <el-col :span="7">
          <el-form-item label="图号" label-width="120px" prop="name">
            <el-input
              class="w-100percent"
              v-model="basics.drawingNumber"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="产品名称" label-width="120px" prop="type">
            <el-input v-model="basics.name" class="w120" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            v-if="basics.number > 0"
            label="数量"
            label-width="120px"
            prop="area"
          >
            <el-input
              v-model="basics.number"
              class="w120"
              placeholder="产品工号"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="tab">
        <div v-if="dan">
          <template v-for="version in this.versionIdList">
            <el-table
              class="mt0"
              border
              stripe
              :span-method="merge"
              :data="activeData"
              row-key="sid"
              default-expand-all
              :tree-props="{ children: 'equipmentList', hasChildren: 'hasChildren' }"
            >
              <el-table-column
                prop="sequenceNumber"
                label="工序号"
                align="right"
                width="80"
              ></el-table-column>
              <el-table-column
                prop="processName"
                label="工序名称"
                align="center"
                width="150"
              ></el-table-column>
              <el-table-column prop="single" label="单机" align="center" width="100">
                <template slot-scope="scope">
                  <el-switch
                    v-if="scope.row.department == '加工'"
                    v-model="scope.row.single"
                    active-color="#13ce66"
                    disabled
                  ></el-switch>
                  <!--      <el-input v-model="scope.row.remark"></el-input>-->
                </template>
              </el-table-column>
              <el-table-column
                prop="department"
                label="部门"
                align="center"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="equipment"
                label="设备/供应商"
                align="center"
                width="175"
              ></el-table-column>
              <el-table-column
                prop="debugHour"
                label="定额工时"
                align="center"
                width="125"
              ></el-table-column>
              <el-table-column
                prop="quotaHour"
                label="调试工时"
                align="center"
                min-width="110"
              ></el-table-column>
            </el-table>
          </template>
        </div>
        <div v-else>
          <el-collapse accordion @change="activeChange">
            <template v-for="version in this.versionIdList">
              <el-collapse-item
                v-if="version.versionState != ''"
                :name="version.versionId"
              >
                <template slot="title">
                  <span class="pr10 fontSize14 bold flex__item"
                    >工艺版本：{{ version.versionName }}</span
                  >
                  <span class="pr10 fontSize14 bold"
                    >状态：{{ version.versionState || '未设计' }}</span
                  >
                </template>
                <el-table
                  class="mt0"
                  border
                  stripe
                  :span-method="merge"
                  :data="activeData"
                  row-key="sid"
                  default-expand-all
                  :tree-props="{ children: 'equipmentList', hasChildren: 'hasChildren' }"
                >
                  <el-table-column
                    prop="sequenceNumber"
                    label="工序号"
                    align="right"
                    width="80"
                  ></el-table-column>
                  <el-table-column
                    prop="processName"
                    label="工序名称" 
                    align="left"
                    width="110"
                  ></el-table-column>
                  <el-table-column
                    prop="single"
                    label="单双机(单)"
                    align="center"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <el-switch
                        v-if="scope.row.department == '加工'"
                        v-model="scope.row.single"
                        active-color="#13ce66"
                        disabled
                      ></el-switch>
                      <!--      <el-input v-model="scope.row.remark"></el-input>-->
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="department"
                    label="部门/执行"
                    align="center"
                    width="120"
                  ></el-table-column>
                  <el-table-column
                    prop="equipment"
                    label="设备/供应商"
                    align="center"
                    width="120"
                  ></el-table-column>
                  <el-table-column
                    prop="debugHour"
                    label="定额工时"
                    align="center"
                    width="110"
                  ></el-table-column>
                  <el-table-column
                    prop="quotaHour"
                    label="调试工时"
                    align="center"
                    min-width="110"
                  ></el-table-column>
                </el-table>
              </el-collapse-item>
            </template>
          </el-collapse>
        </div>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { State, namespace } from "vuex-class";

const vuexProcess = namespace("TwoProcess");

@Component({
  components: {},
})
export default class DialogDetail extends Vue {
  public $refs!: {
    form: any;
  };
  @vuexProcess.State versionIdList: any;
  @vuexProcess.State processDetailList: any;
  // @vuexProcess.State processList:any
  title: string = "新增生产通知单";
  visible: boolean = false;
  versionName: string = "";
  processList: any[] = [];
  dan: boolean = true;
  basics: any = {
    drawingNumber: "",
    name: "",
    number: "",
    version: "",
  };

  //折叠面板
  activeData: any = [];
  activeChange(versionId: any) {
    console.log("name", versionId);
    let arr = this.processDetailList;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].versionId === versionId) {
        this.activeData = arr[i].processList;
        this.addid();
        break;
      }
    }
  }
  addid() {
    let i;
    let sid = 0;
    for (i = 0; i < this.activeData.length; i++) {
      //一级添加sid
      let parent = this.activeData[i];
      let parentkey = "sid";
      let parentvalue = ++sid;
      parent[parentkey] = parentvalue;

      if (this.activeData[i].equipmentList.length) {
        let child = this.activeData[i].equipmentList;
        for (let c = 0; c < child.length; c++) {
          //二级添加sid
          let obj = child[c]; //或者 var obj=new Object();

          let key = "sid";
          let value = ++sid;
          obj[key] = value;
        }
      } else {
        let obj = this.activeData[i]; //或者 var obj=new Object();//{}
        let equipment = "equipment";
        let values = this.activeData[i].supplier;
        obj[equipment] = values;
      }
    }
    // console.log('加id' + this.product)
  }

  getData(drawingNumber: string, name: string, number: Number) {
    this.basics.drawingNumber = drawingNumber;
    this.basics.name = name;
    this.basics.number = number;
  }
  /**
   * 判断数组或者对象是否为空
   *
   * */
  isEmpty(obj) {
    if (!obj && obj !== 0 && obj !== "") {
      return true; // 检验 undefined 和 null
    } else if (Array.prototype.isPrototypeOf(obj) && obj.length === 0) {
      return true;
    } else if (Object.prototype.isPrototypeOf(obj) && Object.keys(obj).length === 0) {
      return true;
    } else {
      return false;
    }
  }

  open(isNew = true) {
    if (isNew) {
      this.title = "查看设计详情";
      this.dan = false;
    } else {
      this.title = "工艺版本详情";
      this.dan = true;
      let arr = this.processDetailList;
      this.activeData = arr[0].processList;
      this.addid();
    }
    if (this.processDetailList.length > 0) {
      //  console.log('you')
      let result = this.isEmpty(this.processDetailList[0].versionName);
      //  console.log('v',result)
      if (!result) {
        this.versionName = this.processDetailList[0].versionName;
      } else {
        this.versionName = "";
      }
      if (this.processDetailList[0].processList.length) {
        // console.log('list')
        this.processList = this.processDetailList[0].processList;
      } else {
        this.processList = [];
      }
    } else {
      this.processList = [];
      this.versionName = "";
    }

    this.visible = true;
  }

  close() {
    this.$refs.form.resetFields();
    this.versionName = "";
    this.processList = [];
    this.basics = {
      drawingNumber: "",
      name: "",
      number: "",
      version: "",
    };
    this.visible = false;
  }

  merge({ row, column, rowIndex, columnIndex }) {
    // console.log('查看', row, row.equipment)

    if (!row.sequenceNumber) {
      if (columnIndex === 0) {
        return [1, 3];
      } else if (columnIndex === 1) {
        return [0, 0];
      } else if (columnIndex === 2) {
        return [0, 0];
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dd {
  .el-dialog__wrapper {
    overflow: hidden;
    .el-dialog {
      height: 85vh;
      margin-top: 5vh !important;
      display: flex;
      flex-direction: column;
      .el-dialog__body {
        flex: 1;
        // height: 450px;
        overflow: auto;
        .information {
          margin-top: 20px;
          .el-table {
            .el-input__inner {
              border: none;
              background: transparent;
            }
          }
        }

        .el-input__inner {
          background-color: #fff;
          border-color: #e4e7ed;
          color: #000;
          cursor: text;
        }
      }
      .el-dialog__footer {
        border-top: 1px solid #eee;
        padding: 10px 20px;
        background: #fefefe;
      }
      .custom-table {
        // 取消表格下边线
        tbody tr:last-child td {
          border-bottom: none !important;
        }
      }
    }
  }
}
</style>
